<template>
  <div>
    <bread ref="bread"></bread>
    <el-card>
      <el-button type="primary" @click="showCategoriesDialog">添加分类</el-button>
<!--      树形表格-->
      <tree-table :data="categoriesList" :columns="columns"
                  :selection-type="false"
                  show-index index-text="#"
                  border :expand-type="false"
                  class="tree-table"
                 :show-row-hover="false">
        <template slot="isOK" slot-scope="scope">
            <i class="el-icon-success" v-if="scope.row.cat_deleted=true" style="color:green"></i>
            <i class="el-icon-error" v-if="scope.row.cat_deleted=false" style="color: red"></i>
        </template>
        <template slot="order"slot-scope="scope">
          <el-tag v-if="scope.row.cat_level===0" type="success" size="mini">一级</el-tag>
          <el-tag v-if="scope.row.cat_level===1" type="primary" size="mini">二级</el-tag>
          <el-tag v-if="scope.row.cat_level===2" type="warning" size="mini">三级</el-tag>
        </template>
        <template slot="option" slot-scope="scope">
          <el-button size="mini" type="primary" @click="showEditCategoriesForm(scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="deleteCategories(scope.row.cat_id)">删除</el-button>
        </template>
      </tree-table>
<!--      分页-->
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryInfo.pagenum"
          :page-sizes="[5,10,15]"
          :page-size="queryInfo.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </el-card>
    <!--  添加分类-->
    <el-dialog
        title="添加分类"
        :visible.sync="addCategoriesDialog"
        width="50%">
       <el-form :model="addCategoriesForm"
                :rules="rules"
                ref="addCategoriesRef"
                label-width="100px">
       <el-form-item label="分类名称:" prop="cate_name">
         <el-input v-model="addCategoriesForm.cat_name"></el-input>
       </el-form-item>
       <el-form-item label="父级分类:">
           <el-cascader
               v-model="selectedKey"
               :options="parentCategoriesList"
               :props="{ expandTrigger: 'hover', value:'cat_id',label:'cat_name',children:'children',checkStrictly:true}"
               @change="parentCateChange"
               clearable></el-cascader>
       </el-form-item>
       </el-form>
    <span slot="footer" class="dialog-footer">
    <el-button @click="addCategoriesDialog= false">取 消</el-button>
    <el-button type="primary" @click="addCategories">确 定</el-button>
    </span>
    </el-dialog>
<!--    编辑分类-->
    <el-dialog
        title="编辑分类"
        :visible.sync="editCategoriesVisable"
        width="50%">
      <el-form>
        <el-form-item label="商品分类名称：">
          <el-input v-model="editCategoriesForm.cat_name"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button @click="editCategoriesVisable = false">取 消</el-button>
    <el-button type="primary" @click="addEditCategories">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>
<script>
import bread from "@/components/bread";
export default {
  name: "categories",
  components:{ bread },
  data(){
    return{
      categoriesList:[],
      parentCategoriesList:[],
      selectedKey:[],
      breadList:[],
      editCategoriesVisable:false,
      queryInfo:{
        type:3,
        pagenum:1,
        pagesize:5
      },
      total:0,
      addCategoriesForm:{
        cat_pid:0,
        cat_name:'',
        cat_level:0
      },
      editCategoriesForm:{
        cat_id:'',
        cat_name:''
      },
      rules:{
        cate_name: [
          { required: true ,message:'请输入分类' ,trigger: 'blur' },
        ]
      },
      addCategoriesDialog:false,
      columns:[
        {
          label:'分类名称',
          prop:'cat_name',
        },
        {
          label: '是否有效',
          type:'template',
          template:'isOK'
        },
        {
          label: '排序',
          type: 'template',
          template: 'order'
        },
        {
          label: '操作',
          type: 'template',
          template: 'option'
        }
      ],
    }
  },
  methods:{
    //加载分类表格
    async getCateList(){
    const { data:res} = await this.$http.get('categories',{ params:this.queryInfo });
   if(res.meta.status==200){
     this.$message.success(res.meta.msg)
     this.categoriesList=res.data.result
     this.total=res.data.total
     console.log(res.data)
   }else{
     this.$message.error(res.meta.msg)
   }
    },
    handleSizeChange(newSize){
      this.queryInfo.pagesize=newSize
      this.getCateList()
    },
    handleCurrentChange(newPage){
      this.queryInfo.pagenum=newPage
      this.getCateList()
    },
    //添加分类的弹窗
    async showCategoriesDialog(){
      this.addCategoriesDialog=true
      const { data:res} =await this.$http.get('categories',{ params: { type:2 } })
      if (res.meta.status==200){
        this.$message.success(res.meta.msg)
        this.parentCategoriesList=res.data
      }
      else {
        this.$message.error(res.meta.msg)
      }
    },
    parentCateChange(){
      console.log(this.selectedKey)
      this.addCategoriesForm.cat_pid=this.selectedKey[this.selectedKey.length-1]
      this.addCategoriesForm.cat_level=this.selectedKey.length
    },
    //添加分类的实现
    async addCategories(){
      this.addCategoriesDialog=false
      const { data:res } =await this.$http.post('categories',this.addCategoriesForm)
      console.log(res)
      if(res.meta.status==201){
        this.$message.success(res.meta.msg)
      }
      else {
        this.$message.error(res.meta.msg)
      }
      this.getCateList()
    },
    //删除分类
    async deleteCategories(id){
      const { data:res} =await this.$http.delete('categories/'+id)
      console.log(res)
      if (res.meta.status==200){
        this.$message.success(res.meta.status)
      }
      this.$confirm('此操作将永久删除该分类, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then( async () => {
        const { data:res} =await this.$http.delete('categories/'+id)
        if (res.meta.status==200){
          this.$message.success(res.meta.msg)
        }
        else {
          this.$message.error(res.meta.msg)
        }
        this.getCateList()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    //编辑分类
    async showEditCategoriesForm(row){
      this.editCategoriesVisable=true
      const {data:res} = await this.$http.get('categories/'+row.cat_id)
      this.editCategoriesForm.cat_id=res.data.cat_id
      this.editCategoriesForm.cat_name=res.data.cat_name
    },
    //提交修改
   async addEditCategories(){
     const {data:res} =  await this.$http.put('categories/'+this.editCategoriesForm.cat_id,{ cat_name:this.editCategoriesForm.cat_name})
     if(res.meta.status==200){
       this.$message.success(res.meta.msg)
     }else {
       this.$message.error(res.meta.msg)
     }
     this.editCategoriesVisable=false
     this.getCateList()
    },
  },
  async created() {
    this.getCateList()
    const { data: res } = await this.$http.get('menus')
    this.breadList.push(res.data[2].authName)
    this.breadList.push(res.data[2].children[2].authName)
    this.$refs.bread.getBreadList(this.breadList)
  }
}
</script>
<style scoped>
.el-card{
  margin-top: 20px;
}
.tree-table{
  margin-top: 20px;
}
</style>
